<template>
  <div>
    <CommentForm 
    :articleId="String(route.params.articleId)"
     :parentId="null" 
     />
    <template v-for="(comment, index) in data" :key="comment.id">
      <a-comment>
        <template #actions>
          <span @click="replyTo(comment.id, index)">回复</span>
          <span @click="deleteComment(comment.id)">删除</span>
        </template>
        <template #author>
          <a>{{ comment.authorName }}</a>
        </template>
        <template #avatar>
          <a-avatar
            :src="comment.avatar || 'https://joeschmoe.io/api/v1/random'"
            :alt="comment.authorName"
          />
        </template>
        <template #content>
          <p>{{ comment.content }}</p>
        </template>
        <div>
          <CommentForm
            v-if="globalActiveIndex === comment.id"
            :key="comment.id"
            :articleId="String(route.params.articleId)"
            :parentId="comment.id"
            placeholder="写下你的回复..."
            @submit-success="handleSubmitSuccess"
          />
        </div>
    
        <CommentNode
          v-show="isExpanded"
          v-for="child in comment.children"
          :key="child.id"
          :comment="child"
          :active-index="globalActiveIndex"
          @update:active-index="val=>globalActiveIndex = val" 
          
            />
      </a-comment>
      <div>
      
      </div>
    </template>
    <span class="commentaries" @click="toggleExpand" >
          {{ isExpanded ? "收起评论" : "查看评论" }}
        </span>
    <hr>
        
  </div>
</template>
<script lang="ts" setup>
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import request from "@/components/utiles/request.js";
import { useRoute } from "vue-router";
import { provide, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import CommentForm from "./CommentForm.vue";
import { Comment } from "@/components/comment/Comment"; // 假设你有一个类型定义文件
import CommentNode from "@/components/comment/CommentNode.vue"; // 引入子评论组件

dayjs.extend(relativeTime);
const route = useRoute();
const data = reactive<Comment[]>([]);
const isExpanded = ref<boolean>(false);
// 修改响应式状态
const globalActiveIndex = ref<number>(-1); // 用 -1 表示未激活任何评论

const getCommentData = async () => {
  try {
    const articleId = route.params.articleId;
    const response = await request.get(`/comment/selectComment?id=${articleId}`);
    if (response.data.code === 200) {
      data.push(...response.data.data);
      console.log(data);
    } else {
      ElMessage.error("获取评论失败");
    }
  } catch (error) {
    console.error("Error fetching comments:", error);
    return [];
  }
};
getCommentData();
const getCommentDataRef = ref(getCommentData);
provide("getCommentData", getCommentDataRef.value);
const deleteComment = async (commentId: number) => {};

const replyTo = (commentId: number, index: number) => {
  globalActiveIndex.value = globalActiveIndex.value === commentId ? -1 : commentId;
  console.log("回复评论ID:", commentId, "索引:", index);
  // 这里可以添加逻辑来处理回复操作，比如显示回复表单等
};
// 添加提交成功处理函数
const handleSubmitSuccess = () => {
  globalActiveIndex.value = -1; // 关闭当前激活的评论表单
  getCommentData(); // 重新加载评论列表
};
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
  
};
</script>
<style>
/* 添加子评论缩进样式 */
.reply-list {
  margin-left: 40px;
  border-left: 2px solid #f0f0f0;
  padding-left: 12px;
}
.commentaries{
  /* 添加展开评论列表样式 */
  /* 居中 */
  display: block;
  text-align: center;
  
  
}
</style>
